<template>
  <div class="department-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ department.name || '科室详情' }}</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/portal/departments' }">科室导航</el-breadcrumb-item>
          <el-breadcrumb-item>{{ department.name || '科室详情' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 科室基本信息 -->
      <div class="department-info-card">
        <div class="department-header">
          <div class="department-icon">
            <el-icon><FirstAidKit /></el-icon>
          </div>
          <div class="department-title">
            <h2>{{ department.name }}</h2>
            <p class="department-tags">
              <el-tag size="small" type="success">{{ getDepartmentType(department.type) }}</el-tag>
              <el-tag size="small" type="info" v-if="department.isSpecialized">专科</el-tag>
            </p>
          </div>
          <div class="department-action">
            <el-button type="primary" @click="navigateToAppointment">预约挂号</el-button>
          </div>
        </div>
        
        <div class="department-brief">
          <p>{{ department.brief }}</p>
        </div>
        
        <div class="department-contact">
          <div class="contact-item">
            <el-icon><Location /></el-icon>
            <span>位置：{{ department.location }}</span>
          </div>
          <div class="contact-item">
            <el-icon><Phone /></el-icon>
            <span>电话：{{ department.phone }}</span>
          </div>
          <div class="contact-item">
            <el-icon><Clock /></el-icon>
            <span>门诊时间：{{ department.outpatientTime }}</span>
          </div>
        </div>
      </div>
      
      <!-- 科室详细介绍 -->
      <el-tabs v-model="activeTab" class="department-tabs">
        <el-tab-pane label="科室介绍" name="intro">
          <div class="department-intro">
            <div class="intro-section">
              <h3 class="section-title">科室概况</h3>
              <div class="section-content" v-html="department.introduction"></div>
            </div>
            
            <div class="intro-section">
              <h3 class="section-title">专业特色</h3>
              <div class="section-content">
                <ul class="feature-list">
                  <li v-for="(feature, index) in department.features" :key="index">
                    {{ feature }}
                  </li>
                </ul>
              </div>
            </div>
            
            <div class="intro-section">
              <h3 class="section-title">诊疗范围</h3>
              <div class="section-content">
                <div class="disease-tags">
                  <el-tag
                    v-for="disease in department.treatableDiseases"
                    :key="disease"
                    effect="plain"
                    class="disease-tag"
                  >
                    {{ disease }}
                  </el-tag>
                </div>
              </div>
            </div>
            
            <div class="intro-section" v-if="department.equipment && department.equipment.length > 0">
              <h3 class="section-title">先进设备</h3>
              <div class="section-content">
                <ul class="equipment-list">
                  <li v-for="(equipment, index) in department.equipment" :key="index">
                    {{ equipment.name }}：{{ equipment.description }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="医生团队" name="doctors">
          <div class="doctor-team">
            <div class="doctor-filters">
              <el-radio-group v-model="doctorTitleFilter" size="large">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="主任医师">主任医师</el-radio-button>
                <el-radio-button label="副主任医师">副主任医师</el-radio-button>
                <el-radio-button label="主治医师">主治医师</el-radio-button>
              </el-radio-group>
            </div>
            
            <div class="doctors-list">
              <div 
                v-for="doctor in filteredDoctors" 
                :key="doctor.id" 
                class="doctor-card"
                @click="navigateToDoctorDetail(doctor.id)"
              >
                <div class="doctor-avatar">
                  <el-avatar :size="100" :src="doctor.avatar"></el-avatar>
                </div>
                <div class="doctor-info">
                  <h3 class="doctor-name">
                    {{ doctor.name }}
                    <span class="doctor-title">{{ doctor.title }}</span>
                  </h3>
                  <p class="doctor-specialty">{{ doctor.specialty }}</p>
                  <p class="doctor-rating">
                    <el-rate v-model="doctor.rating" disabled text-color="#ff9900"></el-rate>
                    <span class="appointment-count">已预约：{{ doctor.appointmentCount }}</span>
                  </p>
                  <p class="doctor-brief">{{ doctor.brief }}</p>
                </div>
                <div class="doctor-action">
                  <el-button type="primary" @click.stop="navigateToAppointmentWithDoctor(doctor.id)">
                    预约
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="出诊安排" name="schedule">
          <div class="schedule-container">
            <div class="schedule-header">
              <h3>门诊出诊安排</h3>
              <p class="schedule-note">*每日上午8:00-12:00，下午13:30-17:30</p>
            </div>
            
            <el-table :data="scheduleData" style="width: 100%" border>
              <el-table-column prop="doctorName" label="医生" width="120" />
              <el-table-column prop="title" label="职称" width="120" />
              <el-table-column label="星期一">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.monday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期二">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.tuesday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期三">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.wednesday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期四">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.thursday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期五">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.friday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期六">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.saturday)"></div>
                </template>
              </el-table-column>
              <el-table-column label="星期日">
                <template #default="scope">
                  <div class="schedule-cell" v-html="formatSchedule(scope.row.sunday)"></div>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="schedule-legend">
              <div class="legend-item">
                <span class="legend-color am"></span>
                <span>上午</span>
              </div>
              <div class="legend-item">
                <span class="legend-color pm"></span>
                <span>下午</span>
              </div>
              <div class="legend-item">
                <span class="legend-color full"></span>
                <span>全天</span>
              </div>
              <div class="legend-item">
                <span class="legend-color none"></span>
                <span>不出诊</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeTab = ref('intro')
const doctorTitleFilter = ref('')

// 获取科室类型
const getDepartmentType = (type) => {
  const types = {
    'internal': '内科',
    'surgery': '外科',
    'special': '专科',
    'technical': '医技科室'
  }
  return types[type] || '其他科室'
}

// 模拟科室数据
const department = ref({
  id: Number(route.params.id) || 1,
  name: '心血管内科',
  type: 'internal',
  isSpecialized: true,
  brief: '心血管内科是医院重点科室，专注于心血管疾病的诊断、治疗和预防。我科拥有一支高素质的专业医疗团队和先进的医疗设备，为患者提供全方位的心血管健康服务。',
  location: '门诊楼3楼东区',
  phone: '0123-45678901',
  outpatientTime: '周一至周五 8:00-17:30',
  introduction: `<p>心血管内科是我院重点发展的优势学科之一，科室成立于1980年，经过四十多年的发展，已成为集医疗、教学、科研为一体的专业学科。</p>
  <p>科室现有医护人员30余名，其中主任医师3名，副主任医师5名，主治医师8名，医师5名，高级护师2名，护师10名。科室设有心电图室、超声心动图室、动态心电图室、心脏康复中心等专业医技部门。</p>
  <p>心血管内科年门诊量近5万人次，住院病人3000余人次，抢救各类危重症患者600余人次，抢救成功率达95%以上。</p>`,
  features: [
    '国家级心血管疾病诊疗中心',
    '拥有完善的急性冠脉综合征救治体系',
    '擅长复杂心律失常的诊断和治疗',
    '心脏重症监护中心(CCU)配备先进设备',
    '心力衰竭规范化治疗团队',
    '开展心脏康复全程管理'
  ],
  treatableDiseases: [
    '冠心病', '心肌梗死', '高血压', '心力衰竭', '心律失常', '心肌病', '心包疾病', '先天性心脏病', '风湿性心脏病', '血脂异常'
  ],
  equipment: [
    { name: '数字减影血管造影系统(DSA)', description: '用于冠状动脉造影和介入治疗' },
    { name: '彩色多普勒超声心动图仪', description: '无创检查心脏结构和功能' },
    { name: '心电生理检查系统', description: '用于各类心律失常的诊断和治疗' },
    { name: '动态心电图系统', description: '长时间记录心电变化' }
  ]
})

// 医生数据
const doctors = ref([
  {
    id: 1,
    name: '张教授',
    title: '主任医师',
    specialty: '冠心病，心力衰竭',
    rating: 4.9,
    appointmentCount: 1563,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '从事心血管疾病临床工作30余年，擅长冠心病、心力衰竭、心律失常、高血压等疾病的诊治。'
  },
  {
    id: 2,
    name: '李医生',
    title: '副主任医师',
    specialty: '心律失常，高血压',
    rating: 4.7,
    appointmentCount: 1247,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '专注于心律失常和高血压的诊治，熟练掌握心电图和动态心电图分析。'
  },
  {
    id: 3,
    name: '王医生',
    title: '主治医师',
    specialty: '心肌炎，心肌病',
    rating: 4.6,
    appointmentCount: 985,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '擅长心肌炎、心肌病等疑难病例的诊断和治疗，对心血管急症处理有丰富经验。'
  },
  {
    id: 4,
    name: '赵医生',
    title: '主治医师',
    specialty: '先天性心脏病，风湿性心脏病',
    rating: 4.5,
    appointmentCount: 768,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '专注于先天性心脏病和风湿性心脏病的诊疗，对心脏超声检查有深入研究。'
  }
])

// 根据职称筛选医生
const filteredDoctors = computed(() => {
  if (!doctorTitleFilter.value) {
    return doctors.value
  }
  return doctors.value.filter(doctor => doctor.title === doctorTitleFilter.value)
})

// 出诊安排数据
const scheduleData = ref([
  {
    doctorName: '张教授',
    title: '主任医师',
    monday: 'am',
    tuesday: '',
    wednesday: 'pm',
    thursday: 'full',
    friday: '',
    saturday: 'am',
    sunday: ''
  },
  {
    doctorName: '李医生',
    title: '副主任医师',
    monday: 'pm',
    tuesday: 'am',
    wednesday: '',
    thursday: 'pm',
    friday: 'am',
    saturday: '',
    sunday: 'pm'
  },
  {
    doctorName: '王医生',
    title: '主治医师',
    monday: '',
    tuesday: 'full',
    wednesday: 'am',
    thursday: '',
    friday: 'pm',
    saturday: 'pm',
    sunday: ''
  },
  {
    doctorName: '赵医生',
    title: '主治医师',
    monday: 'am',
    tuesday: 'pm',
    wednesday: '',
    thursday: 'am',
    friday: 'full',
    saturday: '',
    sunday: 'am'
  }
])

// 格式化出诊信息
const formatSchedule = (schedule) => {
  if (!schedule) {
    return '<span class="schedule-none">休息</span>'
  }
  if (schedule === 'am') {
    return '<span class="schedule-am">上午</span>'
  }
  if (schedule === 'pm') {
    return '<span class="schedule-pm">下午</span>'
  }
  if (schedule === 'full') {
    return '<span class="schedule-full">全天</span>'
  }
  return schedule
}

// 导航到挂号页面
const navigateToAppointment = () => {
  router.push({
    path: '/portal/patient/appointment',
    query: { 
      departmentId: department.value.id,
      departmentName: department.value.name
    }
  })
}

// 导航到挂号页面（选择特定医生）
const navigateToAppointmentWithDoctor = (doctorId) => {
  router.push({
    path: '/portal/patient/appointment',
    query: { 
      departmentId: department.value.id,
      departmentName: department.value.name,
      doctorId: doctorId
    }
  })
}

// 导航到医生详情页
const navigateToDoctorDetail = (doctorId) => {
  router.push(`/portal/expert/${doctorId}`)
}

// 初始化
onMounted(() => {
  // 实际项目中应该根据路由参数请求科室详情数据
  const departmentId = route.params.id
  console.log('加载科室ID:', departmentId)
  
  // 在实际项目中，这里会调用API获取科室信息
  // fetchDepartmentDetail(departmentId)
})
</script>

<style scoped>
.department-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  background-color: white;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.department-info-card {
  margin-bottom: 30px;
}

.department-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.department-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #1989fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.department-icon .el-icon {
  font-size: 30px;
  color: white;
}

.department-title {
  flex: 1;
}

.department-title h2 {
  font-size: 22px;
  margin: 0 0 10px;
  color: #333;
}

.department-tags {
  display: flex;
  gap: 10px;
}

.department-brief {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #606266;
  line-height: 1.6;
}

.department-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  color: #606266;
}

.contact-item .el-icon {
  margin-right: 8px;
  color: #1989fa;
}

.department-tabs {
  margin-top: 30px;
}

.intro-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  margin: 0 0 15px;
  padding-left: 12px;
  border-left: 3px solid #1989fa;
  color: #333;
}

.section-content {
  color: #606266;
  line-height: 1.6;
}

.feature-list,
.equipment-list {
  padding-left: 20px;
  margin: 0;
}

.feature-list li,
.equipment-list li {
  margin-bottom: 10px;
}

.disease-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.disease-tag {
  margin: 5px 0;
}

.doctor-team {
  padding: 20px 0;
}

.doctor-filters {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.doctors-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.doctor-card {
  display: flex;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.doctor-card:hover {
  background: #f0f7ff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.doctor-avatar {
  margin-right: 20px;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 18px;
  margin: 0 0 10px;
}

.doctor-title {
  font-size: 14px;
  color: #1989fa;
  margin-left: 10px;
  font-weight: normal;
}

.doctor-specialty {
  color: #606266;
  margin: 5px 0;
}

.doctor-rating {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.appointment-count {
  margin-left: 10px;
  font-size: 13px;
  color: #909399;
}

.doctor-brief {
  color: #606266;
  margin: 10px 0 0;
  line-height: 1.5;
}

.doctor-action {
  position: absolute;
  right: 20px;
  top: 20px;
}

.schedule-container {
  padding: 20px 0;
}

.schedule-header {
  margin-bottom: 20px;
  text-align: center;
}

.schedule-header h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.schedule-note {
  color: #909399;
  margin: 0;
  font-size: 14px;
}

.schedule-cell {
  text-align: center;
}

.schedule-am {
  display: inline-block;
  padding: 2px 8px;
  background: #e1f3d8;
  color: #67c23a;
  border-radius: 4px;
}

.schedule-pm {
  display: inline-block;
  padding: 2px 8px;
  background: #fdf6ec;
  color: #e6a23c;
  border-radius: 4px;
}

.schedule-full {
  display: inline-block;
  padding: 2px 8px;
  background: #ecf5ff;
  color: #1989fa;
  border-radius: 4px;
}

.schedule-none {
  display: inline-block;
  padding: 2px 8px;
  background: #f4f4f5;
  color: #909399;
  border-radius: 4px;
}

.schedule-legend {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  display: inline-block;
  width: 20px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
}

.legend-color.am {
  background: #e1f3d8;
}

.legend-color.pm {
  background: #fdf6ec;
}

.legend-color.full {
  background: #ecf5ff;
}

.legend-color.none {
  background: #f4f4f5;
}

@media (max-width: 768px) {
  .department-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .department-icon {
    margin-bottom: 15px;
  }
  
  .department-action {
    margin-top: 15px;
  }
  
  .department-contact {
    flex-direction: column;
    gap: 10px;
  }
  
  .doctor-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .doctor-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .doctor-action {
    position: static;
    margin-top: 15px;
  }
}

@media (max-width: 576px) {
  .main-content {
    padding: 20px;
  }
}
</style> 